<template>
	<view>
		<!-- 盲盒规则 -->
		<view class="rule">
			<image src="../../../../static/what.png" mode=""></image>
			<text>盲盒规则</text>
		</view>

		<!-- 顶部奖品轮播部分 -->
		<view class="top-swiper">
			<!-- 这里使用uniapp中的swiper组件，其中current是当前显示的图片索引，change是轮播切换时触发的事件，handleClick是回调函数，在轮播到下一个图片时被调用 -->
			<swiper :autoplay="false" :interval="3000" :duration="1000" @change="handleChange">
				<!-- v-for循环遍历swiperList数组，每个轮播项包含一张图片 -->
				<swiper-item v-for="(item, index) in goodsList" :key="index" class="uni-swiper">
					<!-- 图片的src属性绑定item.src属性值，mode属性指定图片的宽度，widthFix指定图片的宽度为固定值，即图片的宽度不会随屏幕宽度变化，这使得图片的宽度不会超过屏幕宽度 -->
					<image :src="item.detailImages" mode="widthFix"></image>
				</swiper-item>
			</swiper>

			<!-- 箭头 -->
			<view class="control">
				<view @click="prev" class="arrow left-arrow">
					<!-- <image src="../../../../static/arrow.png" mode=""></image> -->
				</view>
				<view @click="next" class="arrow right-arrow">
					<!-- <image src="../../../../static/arrow.png" mode=""></image> -->
				</view>
			</view>
		</view>

		<!-- 不保底 -->
		<view class="guarantee">
			<!-- 左 -->
			<view class="guarantee-left"></view>
			<!-- 中 -->
			<view class="guarantee-center">
				<!-- 上 -->
				<view class="guarantee-center-top">
					<view class="">普通70%</view>
					<text>100%保底抽中</text>
				</view>
				<!-- 中 -->
				<view class="guarantee-center-center">滇北币可抵扣30%</view>
				<!-- 下 -->
				<view class="guarantee-center-bottom">邮费6元，偏远地区邮费15元</view>
			</view>
			<!-- 右 -->
			<!-- <view class="guarantee-right">
				<image src="../../../../static/altman.png" mode=""></image>
				<text>奥特曼</text>
			</view> -->
		</view>

		<!-- 选项卡 -->
		<view class="tab">
			<view class="tab-left" :class="{ 'active': currentTab === '奖品全览' }" @click="changeTab('奖品全览')">
				奖品全览
			</view>
			<view class="tab-right" :class="{ 'active': currentTab === '中奖记录' }" @click="changeTab('中奖记录')">
				中奖记录
			</view>
		</view>

		<!-- 商品概率 -->
		<view class="probability">
			<!-- 商品概率四个字 -->
			<view class="probability-four">商品概率</view>
			<!-- 各个类型以及抽中概率 -->
			<view class="probability-type type1">
				<text>传说</text>
				<view class="probability-type1">概率0.01%</view>
			</view>
			<view class="probability-type type2">
				<text>隐藏</text>
				<view class="probability-type2">概率0.09%</view>
			</view>
			<view class="probability-type type3">
				<text>稀有</text>
				<view class="probability-type3">概率0.9%</view>
			</view>
			<view class="probability-type type4">
				<text>普通</text>
				<view class="probability-type4">概率99%</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="container">
			<view class="item" v-for="(item, index) in goodsList" :key="index" @click="contaDetail(item.id)">
				<!--  @click="toggleDropdown" -->
				<view class="image-wrapper">
					<image class="item-image" :src="item.detailImages" mode="widthFix" />
					<!-- 添加角标 -->
					<view v-if="item.badgeText" class="badge">
						<!-- <text class="badge-text">{{ item.badgeText }}</text> -->
					</view>
				</view>
				<view class="item-content">
					<view class="item-title">{{ item.name }}</view>
					<!-- <view class="item-price">参考价：{{ item.price }}</view> -->
					<view class="item-price">参考价：{{ item.moneyPrice }}</view>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="bottom">
			<view class="bottom-div">
				<view class="bottom-get">
					<view class="bottom-get-center" @click="makeShot">
						<text class="bottom-get-center1">来一发</text>
					</view>
				</view>
				<view class="bottom-get">
					<view class="bottom-get-center">
						<text class="kaihe">获取开盒卡</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 下拉框v-if="isDropdownVisible" -->
		<view v-if="isDropdownVisible" class="dropdown">
			<text class="dropdown-text">奖品预览</text>
			<!-- 轮播部分 -->
			<view class="top-swiper">
				<!-- 这里使用uniapp中的swiper组件，其中current是当前显示的图片索引，change是轮播切换时触发的事件，handleClick是回调函数，在轮播到下一个图片时被调用 -->
				<swiper :autoplay="false" :interval="3000" :duration="1000" @change="handleChange">
					<!-- v-for循环遍历swiperList数组，每个轮播项包含一张图片 -->
					<swiper-item v-for="(item, index) in swiperList" :key="index" class="uni-swiper">
						<!-- 图片的src属性绑定item.src属性值，mode属性指定图片的宽度，widthFix指定图片的宽度为固定值，即图片的宽度不会随屏幕宽度变化，这使得图片的宽度不会超过屏幕宽度 -->
						<image :src="item.src" mode="widthFix"></image>
					</swiper-item>
				</swiper>

				<!-- 箭头 -->
				<view class="control">
					<view @click="prev" class="arrow left-arrow">
						<image src="../../../../static/sqarr.png" mode=""></image>
					</view>
					<view @click="next" class="arrow right-arrow">
						<image src="../../../../static/sqarr.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 图片仅供参考 -->
			<text class="dropdown-text1">图片仅供参考</text>
			<!-- 奖品价格和名字 -->
			<view class="dropdown-price">
				<text>￥</text>
				<text>XXXX</text>
			</view>
			<!-- 商品详情 -->
			<text class="dropdown-text2">商品详情</text>
		</view>
		<uni-popup style="z-index: 1000;" background-color="" ref="detailPopup" type="bottom">
			<view class="purchasePopup">
				<view class="boxDrawing">
					<view class="boxDrawing_top">
						<image :src="details.thumb" mode=""></image>
						<view class="boxDrawing_list">
							<view class="boxDrawing_name">
								{{details.name}}
							</view>
							<view class="boxDrawing_content">
								购买无限赏抽一发
							</view>
						</view>
					</view>
					<view class="boxDrawing_bottom">
						<view class="boxDrawing_price">
							单价：{{details.price}}镇北币
						</view>
						<view class="boxDrawing_num">
							<view>共计：1件，</view>
							<view>小计：{{details.price}}镇北币</view>
						</view>
					</view>
				</view>

				<view class="choosePayment">
					<view class="payment_cent">
						<view class="">
							选择支付
						</view>
						<view class="">
							支付合计：<text class="jingshi">{{details.price}}镇北币</text>
						</view>
					</view>
					<view class="list-item">
						<view class="body">
							<!-- 优惠券 -->
							红包可用
						</view>
						<view class="arrow-right bold" v-if="currentCoupon.id" @tap="couponsVisible = true">
							<text class="meta red">- ¥{{order.coupon_discount ||  currentCoupon.discountMoney}}</text>
							<text class="new-iconfont icon-arrow-right"></text>
						</view>
						<view class="arrow-right" v-else @tap="couponsVisible = true">
							<text class="meta" v-if="usableCoupons.length">{{usableCoupons.length}}张可用</text>
							<text class="meta" v-else>无可用</text>
							<text class="new-iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="checkPayment">
						<view class="pay_mode">
							<view class="weixinPay">
								镇北币:{{zhenbeiCoin.balance}}
							</view>
							<checkbox color="rgb(240, 206, 173)" background-color="#fff"
								border-color="rgb(240, 206, 173)" activeBackgroundColor="#fff"
								activeBorderColor="rgb(240, 206, 173)" />
						</view>
						<view class="pay_mode">
							<view class="weixinPay">
								晶石:{{spar.balance}}
							</view>
							<checkbox color="rgb(240, 206, 173)" background-color="#fff"
								border-color="rgb(240, 206, 173)" activeBackgroundColor="#fff"
								activeBorderColor="rgb(240, 206, 173)" />
						</view>
						<!-- <view class="pay_mode">
							<view class="weixinPay">
								红包
							</view>
							<checkbox color="rgb(240, 206, 173)" background-color="#fff"
								border-color="rgb(240, 206, 173)" activeBackgroundColor="#fff"
								activeBorderColor="rgb(240, 206, 173)" />
						</view> -->
						<view class="pay_mode">
							<view class="weixinPay">
								微信支付
							</view>
							<checkbox color="rgb(240, 206, 173)" background-color="#fff"
								border-color="rgb(240, 206, 173)" activeBackgroundColor="#fff"
								activeBorderColor="rgb(240, 206, 173)" />
						</view>
					</view>
					<view class="payment_btn" @click="payMent()">
						确认支付
					</view>
				</view>
			</view>
			<UsableCouponPopup v-if="couponsVisible" :unusableCoupons="unusableCoupons" :usableCoupons="usableCoupons"
				:currentCoupon="currentCoupon" @change="couponChange" @close="couponsVisible = false">
			</UsableCouponPopup>
			<!-- <payCard  @close="hideSkuPopup"></payCard> -->
			<!-- <BoxSkuPopup :skuList="info.skus" :detailImageList="info.detailImages" @close="hideSkuPopup"></BoxSkuPopup> -->
		</uni-popup>
		<view v-if="isDropdownVisible" class="mask" @click="closeDropdown"></view>
	</view>
</template>

<script>
	import {
		boxAll,
		boxDetail,
		userAssert,
		pay
	} from "@/api/blind.js";
	import {
		$getStorage,
		$setStorage,
		$removeStorage
	} from "@/utils/auth.js";

	export default {
		data() {
			return {
				current: 0,
				currentTab: '奖品全览', // 默认选中奖品全览
				isDropdownVisible: false, // 默认不显示下拉框
				// 详情的对象
				details: {},
				swiperList: [{
						src: 'https://steamgo-csgo-prod.oss-cn-hangzhou.aliyuncs.com/cz0c41bia7ddx5ruyvjy.png',
						alt: ''
					},
					{
						src: 'https://th.bing.com/th/id/R.a9cb98a3977c29914f962a0cf42f4874?rik=zZSTilpf3hevlA&riu=http%3a%2f%2fapi.yochat88.com%2fuploads%2fimages%2fbox%2f7dfb56c0aa65989c542c7c5d072769e3.png&ehk=0c6rqUEfpqXJdd7iT%2fWsGXMNhRj3b4IIxcdFRK3Lg5E%3d&risl=&pid=ImgRaw&r=0',
						alt: ''
					},
					{
						src: 'https://game-aesy.c5game.com/steam/730/13fc467a89a0b4e1b3691cfccdb8bbc2.png?x-oss-process=image/resize,w_480,h_360',
						alt: ''
					},
					{
						src: 'https://igstatic.igxe.cn/csgo/img/crazy-teeth/tmp/1/012.png',
						alt: ''
					},
					{
						src: 'https://game-aesy.c5game.com/steam/730/b00ffa946567e12f1a9323fbc73e5ee5.png?x-oss-process=image/resize,w_480,h_360',
						alt: ''
					},
					{
						src: 'https://img.zbt.com/b/economy/730/2020/08/07/40c9387cf0541c100957e458204a7b4e.png',
						alt: ''
					},
					{
						src: 'https://game-aesy.c5game.com/steam/730/a63567dedf3dc14d3f50857ebdc8adfa.png?x-oss-process=image/resize,w_480,h_360',
						alt: ''
					},
					{
						src: 'https://img.zbt.com/b/economy/730/2020/08/07/40c9387cf0541c100957e458204a7b4e.png',
						alt: ''
					},
					{
						src: 'https://t0skins.com/public/uploads/ornaments/20210831/cdd7fd2f63174ff7b84627b2f613e809.png',
						alt: ''
					},
					{
						src: 'https://img.flametop.cn/1744ac05f8d9cdb45dcf9c2bfa60b29f.png',
						alt: ''
					},
				],
				// 奖品全揽
				goodsList: [],
				// 镇北币信息
				zhenbeiCoin: {},
				couponsVisible: false,
				unusableCoupons: [],
				usableCoupons: [],
				currentCoupon: {},
				// 晶石
				spar: {}
			};
		},
		onLoad(e) {
			this.$nextTick(() => {
				this.$refs.mySwiper = this.$refs['mySwiperRef'];
				console.log('Swiper instance:', this.$refs.mySwiper);

				// 在获取 Swiper 实例后再进行数据请求
				boxDetail({
					boxId: e.boxId
				}).then(res => {
					this.details = res.data
					this.goodsList = res.data.boxSkuVo;
				});

			});
		},
		methods: {
			handleChange(e) {
				this.current = e.detail.current;
			},
			// 切换到上一张图片
			prev() {
				if (this.currentIndex > 0) {
					this.currentIndex--;
				} else {
					// 如果已经是第一张，则切换到最后一张
					this.currentIndex = this.imageList.length - 1;
				}
			},

			// 切换到下一张图片
			next() {
				if (this.currentIndex < this.imageList.length - 1) {
					this.currentIndex++;
				} else {
					// 如果已经是最后一张，则切换到第一张
					this.currentIndex = 0;
				}
			},

			closeDropdown() {
				this.isDropdownVisible = false;
			},
			toggleDropdown() {
				this.isDropdownVisible = !this.isDropdownVisible;
				console.log(this.isDropdownVisible);
			},
			confirmFilter() {
				// 确认逻辑
				console.log('Start Date:', this.startDate);
				console.log('End Date:', this.endDate);
				this.isDropdownVisible = false; // 关闭下拉框
			},
			closeDropdown() {
				this.isDropdownVisible = false;
			},

			swiperChange(direction) {
				const len = this.swiperList.length;
				let nextIndex = this.current;

				if (this.$refs.mySwiper && this.$refs.mySwiper.swiper) {
					if (direction === 'prev') {
						nextIndex = (len + this.current - 1) % len; // 往前翻页
					} else {
						nextIndex = (this.current + 1) % len; // 往后翻页
					}
					this.$refs.mySwiper.swiper.changeTo(nextIndex);
				}
			},
			changeTab(tab) {
				this.currentTab = tab;
				// 在这里你可以添加切换标签时的其他逻辑
			},
			// 确认支付方法
			payMent() {
				let ment = {
					totalMoney: this.details.price,
					couponsId: "",
					payMoney: this.details.price,
				}
				uni.showLoading({
					title: '正在支付中...'
				})

				pay(ment).then((res) => {
					if (res.code == 200) {
						// 关闭确认支付的弹框
						this.$refs.detailPopup.close()
						// 存储盒子信息
						$setStorage('details', JSON.stringify(this.details));
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 4000,
						});
						let code = res.message
						// 延时跳转到抽奖页面
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/blind/index2/index2?code='+ code  + "&msg=" + 2
							});
						}, 2000);
					}
				})
			},
			makeShot() {
				// 点击来一发显示的弹框
				this.$refs.detailPopup.open('bottom')
				// type:1代表消费盲盒，接口是查询余额接口
				userAssert({
					type: 1
				}).then((res) => {
					this.zhenbeiCoin = res.data
					this.unusableCoupons = res.data.coupon.unusable
					this.usableCoupons = res.data.coupon.usable
					// this.
					console.log(res);
				})
				// uni.navigateTo({
				// 	url: "/pages/blind/index2/index2"
				// })
			},
			hideSkuList() {
				this.$refs.detailPopup.close()
			},
			showSkuList() {

			},
			contaDetail(id) {
				boxList({
					boxId: id
				}).then(res => {
					// this.goodsList = res.data.list;
					console.log(res.data.list);
					uni.navigateTo({
						url: '/pages/blind/index/index',
						success: function() {
							console.log("Navigation success");
						},
						fail: function(error) {
							console.error("Navigation failed", error);
						}
					});
				});
			}
		},


		mounted() {

		},



		components: {}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #151515;
	}


	// 盲盒规则
	.rule {
		width: 25%;
		height: 80rpx;
		// border: 1rpx solid white;
		float: right;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		text {
			font-size: 30rpx;
			color: #f1d3a8;
		}
	}

	// 顶部轮播图
	.top-swiper {
		width: 100%;
		height: 600rpx;
		/* border: 1rpx solid white; */

		swiper {
			width: 80%;
			height: 400rpx;
			// border: 1rpx solid white;
			margin: 0 auto;

			display: flex;

			.uni-swiper {
				// margin-left: 10%;

				// height: 600rpx;
				image {
					width: 100%;
					height: 100%;
					margin: 0 auto;
				}
			}
		}

		.control {
			width: 95%;
			height: 50rpx;
			// border: 1rpx solid white;
			position: relative;
			// top: -207px;
			margin: -207rpx auto;
			display: flex;
			justify-content: space-between;
		}

		.left-arrow {
			display: inline-block;
			-moz-transform: scaleX(-1);
			-webkit-transform: scaleX(-1);
			-o-transform: scaleX(-1);
			transform: scaleX(-1);
			left: 5px;
			/* 调整左箭头的位置 */
		}

		.right-arrow {
			right: 5px;
			/* 调整右箭头的位置 */
		}

		.arrow {
			font-size: 50rpx;
			color: #f1d3a8;
			cursor: pointer;
			position: absolute;
			z-index: 1000;
			/* 调整 z-index 属性，确保在最上层 */

			image {
				width: 45rpx;
				height: 64rpx;
			}
		}
	}

	// 不保底
	.guarantee {
		width: 90%;
		height: 150rpx;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		// 设置渐变色边框
		border-style: solid;
		border-width: 3rpx;
		border-image: linear-gradient(to right, rgba(0, 0, 0, .1) 0%, rgba(241, 211, 168, 0.76) 50%, rgba(0, 0, 0, .1) 100%) 1;
		border-image-slice: 10;

		// 左
		.guarantee-left {
			width: 22%;
			height: 100%;
			// border: 1rpx solid white;
			// background-image: url(../../../../static/guaranteeLeft.png);
			background-size: contain;
			background-repeat: no-repeat;
		}

		// 中
		.guarantee-center {
			width: 60%;
			height: 100%;
			// border: 1rpx solid white;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			// 上
			.guarantee-center-top {
				width: 100%;
				height: 30%;
				// border: 1rpx solid red;
				display: flex;
				align-items: center;
				font-size: 30rpx;

				view {
					width: 150rpx;
					height: 50rpx;
					background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(21, 21, 21));
					// border: 1rpx solid white;
					color: #f1d3a8;
					text-align: center;
					line-height: 50rpx;
				}

				text {
					color: rgb(51, 187, 191);
				}
			}

			// 中
			.guarantee-center-center {
				width: 265rpx;
				height: 30%;
				background-image: -webkit-linear-gradient(-45deg, rgb(134, 22, 21), rgb(21, 21, 21));
				// border: 1rpx solid red;
				color: #f1d3a8;
				text-align: center;
				font-size: 30rpx;
			}

			.guarantee-center-bottom {
				width: 395rpx;
				height: 30%;
				background-image: -webkit-linear-gradient(-45deg, rgb(134, 22, 21), rgb(21, 21, 21));
				// border: 1rpx solid red;
				color: #f1d3a8;
				text-align: center;
				font-size: 30rpx;
			}
		}

		// 右
		.guarantee-right {
			width: 18%;
			height: 100%;
			// border: 1rpx solid white;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 100%;
				height: 60%;
			}

			text {
				font-size: 25rpx;
				color: #f1d3a8;
			}
		}
	}

	// 选项卡
	.tab {
		width: 100%;
		height: 130rpx;
		border-bottom: 1rpx solid rgba(241, 211, 168, 0.3);
		margin: 20rpx auto;
		display: flex;
		justify-content: space-evenly;
		align-items: center;

		.tab-left,
		.tab-right {
			width: 250rpx;
			height: 80rpx;
			border: 3rpx solid #565656;
			color: gray;
			font-size: 35rpx;
			text-align: center;
			line-height: 80rpx;
			/* background-color: #f1d3a8; */
			background-image: -webkit-linear-gradient(-90deg, rgb(117, 117, 116), rgb(21, 21, 21));

			&.active {
				// 在这里设置选中状态下的样式
				/* background-color: #f1d3a8; */
				color: #f1d3a8;
				background-image: -webkit-linear-gradient(-90deg, rgb(69, 51, 27), rgb(21, 21, 21));
			}
		}
	}

	// 商品概率
	.probability {
		width: 90%;
		height: 100rpx;
		// border: 1rpx solid white;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.probability-four {
			width: 15%;
			height: 100%;
			color: #f1d3a8;
			text-align: center;
			font-size: 35rpx;
		}

		.probability-type {
			width: 20%;
			height: 100%;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.probability-type1 {
				background-color: rgba(196, 75, 37, 0.2);
				text-align: center;
				color: rgb(196, 75, 37);
				font-size: 25rpx;
			}

			.probability-type2 {
				background-color: rgba(233, 123, 235, 0.2);
				color: rgb(233, 123, 235);
				text-align: center;
				font-size: 25rpx;
			}

			.probability-type3 {
				background-color: rgba(243, 224, 107, 0.2);
				color: rgb(243, 224, 107);
				text-align: center;
				font-size: 25rpx;
			}

			.probability-type4 {
				background-color: rgba(92, 200, 134, 0.2);
				color: rgb(92, 200, 134);
				text-align: center;
				font-size: 25rpx;
			}
		}

		.type1 {
			// 设置渐变色边框
			border-style: solid;
			border-width: 3rpx;
			border-image: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(241, 211, 168, 0.76) 50%, rgba(255, 0, 0, 0.1) 100%) 1;
			border-image-slice: 10;

			text {
				// color: rgb(134, 22, 21);
				background-image: -webkit-linear-gradient(90deg, rgb(254, 39, 39), rgb(217, 163, 123), rgb(243, 224, 107));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.type2 {
			border: 1rpx solid #261a29;

			text {
				// color: rgb(233, 123, 235);
				background-image: -webkit-linear-gradient(90deg, rgb(233, 123, 235), rgb(233, 123, 235), white);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.type3 {
			border: 1rpx solid #26211a;

			text {
				// color: rgb(243, 224, 107);
				background-image: -webkit-linear-gradient(90deg, rgb(243, 224, 107), rgb(243, 224, 107), white);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.type4 {
			border: 1rpx solid #19271e;

			text {
				// color: rgb(92, 200, 134);
				background-image: -webkit-linear-gradient(90deg, rgb(92, 200, 134), rgb(92, 200, 134), white);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

	// 商品列表
	.container {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		// border: 1rpx solid white;
	}

	.item {
		width: 40%;
		margin-bottom: 60rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #121218;
		border: 3rpx solid #f1d3a8;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.image-wrapper {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 100%;
		/* 保持宽高比 */
		overflow: hidden;
	}

	.item-image {
		width: 100%;
		height: 100%;
	}

	.item-content {
		margin-top: 20rpx;
	}

	.item-title {
		color: #fff;
		font-size: 32rpx;
		line-height: 42rpx;
		margin-bottom: 10rpx;
	}

	.item-price {
		color: #f1d3a8;
		font-size: 32rpx;
		line-height: 42rpx;
	}

	/* 针对奇数项（右侧）进行样式调整 */
	.item:nth-child(odd) {
		margin-right: 2%;
	}

	/* 添加角标样式 */
	.badge {
		width: 60rpx;
		height: 40rpx;
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		padding: 4rpx 8rpx;
		border-radius: 20rpx;
		background-color: red;
		color: #fff;
		font-size: 24rpx;
		line-height: 40rpx;
		text-align: center;
	}

	.badge-text {
		display: inline-block;
	}

	.purchasePopup {
		width: 100%;
		background-color: rgb(241, 241, 241);

		.boxDrawing {
			width: 100%;
			height: 190rpx;
			background-color: #fff;
			padding: 40rpx 25rpx 10rpx 40rpx;

			.boxDrawing_top {
				display: flex;

				image {
					width: 130rpx;
					height: 130rpx;
				}

				.boxDrawing_list {
					height: 130rpx;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.boxDrawing_name {
						font-size: 45rpx;
						font-weight: 600;
					}

					.boxDrawing_content {
						font-size: 35rpx;
						color: rgb(153, 153, 153);
					}

				}

			}

			.boxDrawing_bottom {
				font-size: 30rpx;
				margin-top: 10rpx;
				padding-right: 55rpx;
				display: flex;
				justify-content: space-between;
				color: rgb(153, 153, 153);

				.boxDrawing_num {
					display: flex;

				}
			}

		}

		.choosePayment {
			width: 100%;
			height: 700rpx;
			margin-top: 30rpx;
			background-color: #fff;
			padding: 40rpx;
			font-size: 35rpx;

			.list-item {
				display: flex;
				align-items: center;
				position: relative;
			}

			.list-item .body {
				flex: 1;
				display: flex;
				align-items: center;
			}

			.list-item-title {
				flex: 1;
			}

			.meta {
				font-size: 35rpx;
				color: #f1d3a8;
			}

			.payment_cent {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				padding-right: 55rpx;

				.jingshi {
					font-size: 55rpx;
					color: rgb(186, 136, 81);
					font-weight: 400;
				}
			}

			.checkPayment {
				margin-top: 60rpx;

				.pay_mode {
					padding-right: 55rpx;
					display: flex;
					justify-content: space-between;
					margin: 20rpx 0 20rpx 0;
				}
			}

			.payment_btn {
				width: 670rpx;
				height: 100rpx;
				background-color: rgb(250, 224, 183);
				text-align: center;
				line-height: 100rpx;
				color: rgb(128, 78, 43);
				font-weight: bold;
				border: 2rpx soild rgb(254, 197, 116);
				margin-top: 50rpx;
			}
		}
	}



	// 底部
	.bottom {
		width: 100%;
		height: 280rpx;
		// border: 1rpx solid white;
		position: fixed;
		bottom: 0;
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), #000);

		// display: flex;
		// align-items: center;
		// justify-content: space-evenly;
		.bottom-div {
			width: 100%;
			height: 280rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.bottom-get {
				width: 170rpx;
				height: 170rpx;
				background-image: -webkit-linear-gradient(-45deg, rgba(209, 183, 146, 0.2), rgba(172, 148, 99, 0.8));
				transform: rotate(45deg);
				// border: 10rpx solid;
				// border-image-source: linear-gradient(to bottom, rgba(172,148,99,0.5), rgba(209, 183, 146, 0.2));
				// border-image-slice: 1;
				border-radius: 8rpx;

				.bottom-get-center {
					width: 150rpx;
					height: 150rpx;
					margin-top: 10rpx;
					margin-left: 10rpx;
					border: 1rpx solid #ac9463;
					background-image: -webkit-linear-gradient(-45deg, rgba(241, 211, 168, 0.2), #ac9463);
					// transform: rotate(45deg);
					border-radius: 8rpx;

					.bottom-get-center1 {
						font-size: 42rpx;
						font-weight: bolder;
						color: white;
						text-align: center;
						display: inline-block;
						transform: rotate(-45deg);
						margin-left: 10rpx;
						margin-top: 45rpx;
						text-shadow: 0px 0px 13px #f1d3a8;
					}

					.kaihe {
						font-size: 42rpx;
						font-weight: bolder;
						color: white;
						text-align: center;
						display: inline-block;
						transform: rotate(-45deg);
						margin-left: 3rpx;
						margin-top: 20rpx;
						text-shadow: 0px 0px 13px #f1d3a8;
					}
				}

			}
		}



		text {
			font-size: 45rpx;
			font-weight: bolder;
			color: white;
			text-align: center;

		}
	}

	/* 下拉框 */
	.dropdown {
		height: 70%;
		width: 100%;
		padding-top: 20px;
		padding-bottom: 20px;
		position: absolute !important;
		bottom: 0;
		display: block;
		background-color: #1a1724 !important;
		border: 1px solid #5d4748;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		z-index: 999;
		display: flex;
		flex-direction: column;

		.dropdown-text {
			font-size: 40rpx;
			color: #f1d3a8;
			text-align: center;
		}

		.dropdown-text1 {
			font-size: 30rpx;
			transform: translate(550rpx) translateY(-130rpx);
		}

		.dropdown-price {
			width: 100%;
			height: 100rpx;
			transform: translateY(-130rpx);
			border-bottom: 3rpx solid rgba(241, 211, 168, 0.3);
			font-size: 30rpx;
			color: #f1d3a8;
			display: flex;
			flex-direction: column;
			padding-bottom: 30rpx;

			text {
				padding-left: 30rpx;
			}

			text:nth-child(1) {
				font-size: 40rpx;
			}
		}

		.dropdown-text2 {
			font-size: 30rpx;
			color: #f1d3a8;
			transform: translateY(-100rpx) translateX(30rpx);
		}
	}
</style>